<template>
  <div class="info-page-root">
    <div class="go-back-container" v-if="showGoBack">
      <div @click="goBack" class="txt-container">
        <i class="el-icon-arrow-left"></i>
        返回
      </div>
    </div>
    <div class="body-container" :style="{height:`calc(100% - ${(showGoBack ? 35 : 0) + ($slots.footer ? 50 : 0)}px)`}">
        <slot name="body"></slot>
    </div>
    <div v-if="$slots.footer" class="footer-container">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  props:{
    showGoBack:{
      type:Boolean,
      default:true
    }
  },
  methods: {
    goBack() {
      this.$router.back(-1)
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/style/businessTheme.scss";
.info-page-root {
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;

  .go-back-container {
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;

    .txt-container {
      font-size: $second-font-size;
      cursor: pointer;
      color: #1482f0;
    }
  }
  // 设置表单容器样式
  .body-container {
    width: 100%;
    //设置form表单项样式
    ::v-deep .el-form-item{
      margin-bottom: 5px; //设置项目间间距
      //设置文本框样式
      .el-form-item__content{
        .el-select,.el-date-editor{
          width: 100%;
        }
        .el-input__inner{
          height: 25px;
          line-height: 25px;
          font-size: 12px;
        }
      }
    }
  }

  .footer-container {
    height: 50px;
    width: 100%;   //用以设置保存及创建按钮位置大则靠右小则靠左
    display: flex;
    justify-content: flex-end;
    align-items: center;
    ::v-deep .el-button {
      height: 32px;

      &.el-button--primary {
        background: $bt-color;
        border: none;
      }
    }
  }
}
</style>
